<template>
    <div>
        <!--        分类图标-->
        <div style="height: 180px;display: flex;justify-content: center">
            <el-card class="fenlei" style="width: 230px;text-align: center">
                <el-image
                        style="width: 80px; height: 80px;border-radius: 40px"
                        :src="tag.tagImg"
                        :preview-src-list="[tag.tagImg]"
                ></el-image>
                <h4 style="font-weight: 200;font-size: 18px"><a href="#">{{tag.tagName}}</a></h4>
                <!--                <p style="font-size: 12px"><a href="#">{{// type.typeDescription}}</a></p>-->
                <span style="display: inline-block;margin-top: 15px;font-size: 12px;color: #969696">文章</span>
            </el-card>
        </div>
        <!--        分类列表-->
        <div style="display: flex;justify-content: center;background-color: #F5F5F5;margin-top: 5px">
            <div>
                <el-card v-for="(item,index) in blogList" class="el-card-body">
                    <div class="el-card-header">
                        <a class="atitle" style="font-size: 16px;color: #303133;font-weight: 200;cursor: pointer"
                           @click="toDetail(item.id)">{{item.title}}</a>
                        <span style="color:#A6A6BA;font-size: 12px ">                        <i
                                class="el-icon-view"></i>{{item.views}}</span>
                    </div>
                    <div class="el-card-describe" style="font-size: 15px">{{item.typeDescription}}</div>
                    <div class="el-card-footer">
                        <span style="font-size: 12px;color: #A6A6AE">{{item.nickname}}</span>
                        <div>
                            <el-tag v-for="(item2,index2) in item.tagList" style="margin-right: 10px" size="mini">
                                {{ item2 }}
                            </el-tag>
                        </div>
                        <span class="time"><i class="el-icon-time"></i> {{item.formatTime}}</span>
                    </div>
                </el-card>


            </div>

        </div>
    </div>
</template>

<script>
    import {formatDate} from '@/assets/js/Time';
    // import Global from "../assets/js/Global";
    import Global from "../../public/static/Global";

    export default {
        name: "CategoryList",
        data() {
            return {
                blogList: [],
                tag: {
                    // typeDescription: "",
                    tagName: "",
                    tagImg: ""
                }
            }
        },
        methods: {
            async getTabNameById(tagId) {
                const {data: res} = await this.$http.get('/blog/tag/name/' + tagId)
                // console.log(res)
                this.tag.tagName = res.data.name;
            },
            timestampToTime() {
                var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                // let Y = date.getFullYear() + '-';
                // let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                // let D = date.getDate() + ' ';
                // let h = date.getHours() + ':';
                // let m = date.getMinutes() + ':';
                // let s = date.getSeconds();
                // return Y+this.padLeftZero(M)+this.padLeftZero(D)+this.padLeftZero(h)+this.padLeftZero(m)+this.padLeftZero(s);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
            }
            ,
            async getBlogTagList(tagId) {
                console.log(tagId)
                const {data: res} = await this.$http.get('/blog/tag/' + tagId)
                // console.log(res);
                // cons
                console.log(res)
                // var timeformat2 = formatDate(date2, 'yyyy-MM-dd hh:mm') // 转成想要的格式
                for (let i = 0; i < res.data.length; i++) {
                    // console.log(res.data[0])
                    res.data[i].tagImg = Global.baseUrl + res.data[i].tagImg;
                    // res.data.updateTime = timeformat; // 重新赋值
                }
                this.tag.tagImg = res.data[0].tagImg
                console.log(this.tag.tagImg);
                this.blogList = res.data;
                console.log(res);
            },
            toDetail(id) {
                console.log(id);
                this.$router.push({
                    name: 'Detail',
                    query: {
                        id: id
                    }
                })
            }
        },
        created() {
            // console.log(this.$route.params.id)
            console.log(this.$route)
            console.log(this.$route.query.id)
            this.getBlogTagList(this.$route.query.id);  // 获取博客分类列表页
            this.getTabNameById(this.$route.query.id)
        }
    }
</script>

<style lang="less" scoped>
    .fenlei {
        a {
            text-decoration: none;
            color: #303133;
        }

        transition: all 0.5s;

        a:hover {
            color: #40A1FF;
        }
    }

    .fenlei:hover {
        transform: translateY(-20px);
        /*margin: 0 0 20px 0;*/
        box-shadow: 5px 8px 4px 2px #A9A9A9;
    }

    /*    index里的样式*/

    .el-card-header {
        a {
            text-decoration: none;
            /*color: ;*/
        }

        a:hover {
            color: #ECF5FF;
        }
    }

    a:hover {
        color: #40A1FF !important;
        /*background-color: pink!important;*/

    }

    .head {
        width: 100%;
        /*min-width: 1300px;*/
        /*background-color: pink;*/
        height: 61px;

    }

    .el-card-body {
        box-sizing: border-box;
        margin-top: 10px;
        width: 638px;
        /*112*/
        height: 111px;
        transition: all 0.5s;

    }

    .el-card-body:hover {
        transform: scale(0.9);
        box-shadow: 0px 5px 10px 3px #D1D1D1;
    }

    .el-card-header {
        display: flex;
        justify-content: space-between;
    }

    .el-card-footer {
        margin-top: 10px;
        /*margin-right: ;*/
        display: flex;
        justify-content: space-between;

    }

    .el-card-describe {
        margin-top: 10px;
    }

    .time {
        font-size: 12px;
        color: #A6A6BA;
    }

    /*右侧部分布局    */
    .right {
        margin-left: 20px;

        .myself {
            width: 298px;
            height: 180.6px;
        }
    }

    .advertisement {
        margin-top: 10px;
    }

    .newAritle {
        width: 298px;
    }

    .newlink {
        a {
            color: #40A1FF;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    }

    .newAritle {
        margin-top: 10px;
    }

    .guidang {
        width: 298px;
        margin-top: 10px;

        .riqi {
            a {
                color: #78B6F7;
                text-decoration: none;
            }
        }
    }

    /*    index*/
</style>